{% extends 'layout/main.html' %}
{% from 'bootstrap/pagination.html' import render_pagination %}

{% block head %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endblock head %}

{% block content_header %}
<h1>
  回收站
</h1>
<ol class="breadcrumb">
  <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
  <li><a href="#">内容管理</a></li>
  <li class="active">回收站</li>
</ol>
{% endblock %}


{% block content %}
<div class="row" id="app">
  <div class="col-md-12">
    <div class="box">
      <!-- /.box-header -->
      <div class="box-body">

        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width: 10px"><input type="checkbox" value="" id="check_box"></th>
              <th width="100">栏目</th>
              <th>标题</th>
              <th width="200">作者</th>
              <th width="150">创建时间</th>
              <th width="150">更新时间</th>
              <th style="width: 60px">操作</th>
            </tr>
          </thead>
          <tbody>
            {% if model %}
            {% for item in model %}
            <tr>
              <td><input class="ids" type="checkbox" value="{{item.id}}" name="ids[]"></td>
              <td>{{ item.category.title }}</td>
              <td>{{ item.title }}</td>
              <td>{{ item.user.nickname|default('没有设置') }}</td>
              <td>{{ moment(item.created_at).format('Y-MM-DD hh:mm:ss') }}</td>
              <td>{{ moment(item.updated_at).format('Y-MM-DD hh:mm:ss') }}</td>
              <td style="width:100px">
                <a href=""><span class="glyphicon glyphicon-user"></span></a>
                <a href="{{ url_for('article.update', id=item.id) }}"><span
                    class="glyphicon glyphicon-pencil"></span></a>
                <form class="inline" method="post"
                  action="{{ url_for('.delete', id=item.id, physics=1, next=request.full_path) }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                  <button type="submit" class="btn btn-link" style="display:contents;"
                    onclick="return confirm('确认要从回收站中删除吗?');"><span class="glyphicon glyphicon-trash"></span></button>
                </form>
              </td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>

        </table>
      </div>
      <!-- /.box-body -->
      <div class="box-footer clearfix">
        <div class="btn-group">
          <button type="button" @click="choose" class="btn btn-default">全选/取消</button>
          <button type="button" @click="submit_delete" class="btn btn-default">从回收站中删除</button>
          <button type="button" @click="submit_delete" class="btn btn-default">从回收站中还原</button>
          <button type="button" class="btn btn-default">移动</button>
        </div>
        <div class="pagination pagination-sm no-margin pull-right">
          {{ render_pagination(pagination) }}
        </div>
      </div>
    </div>
  </div>
  {% endblock %}

  {% block scripts %}
  {{ super() }}
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      delimiters: ['${', '}'],
      data: {
        title: null,
        news_items: []
      },
      created: function () {
      },
      methods: {
        choose: function () {
          let check_box = $('#check_box')
          check_box.prop('checked', !check_box.is(':checked'))
          $("input[name='ids[]']").prop('checked', check_box.is(':checked'))
        },
        submit_delete: function () {
          let chk_value = [];
          $("input[name='ids[]']:checked").each(function () {
            chk_value.push($(this).val())
          })
          if (chk_value.length === 0) {
            alert('你没有选择文章')
            return false
          }
          if (confirm('确认要从回收站删除吗？')) {
            $.post({
              url: "{{ url_for('.ajax_delete') }}?physics=1",
              data: {
                'csrf_token': '{{ csrf_token() }}',
                'ids': JSON.stringify(chk_value)
              },
              success: function (result) {
                result.success && window.location.reload()
              }
            })
          }
        }
      }
    })
    $(function () {
      $('#check_box').click(function () {
        $("input[name='ids[]']").prop('checked', this.checked)
      })
    })
  </script>
  {% endblock scripts %}